import { useState } from "react";
import { Popup, Steps } from "antd-mobile";
import styles from "./index.module.css";

const { Step } = Steps;
const Index = (props) => {
    const { data } = props;
    const [visible1, setVisible1] = useState(false);
    return (
        <div>
            <div className={styles.listItem}>
                <div className={styles.item_left}>
                    <span>{data.start}</span>
                    <span>{data.end}</span>
                    <span>{data.startTime}</span>
                    <span>
                        一等座 <b>有票</b>
                    </span>
                    <span>
                        二等座 <b>有票</b>
                    </span>
                    <span>
                        商务座 <b>有票</b>
                    </span>
                </div>
                <span className={styles.tick_tag} onClick={() => setVisible1(true)}>
                    经停站
                </span>
            </div>
            <Popup
                visible={visible1}
                onMaskClick={() => {
                    setVisible1(false);
                }}
                onClose={() => {
                    setVisible1(false);
                }}
            >
                <Steps direction="vertical">
                    <Step title="北京" status="finish" description="完成时间：12:30" />
                    <Step title="天津" status="finish" description="完成时间：13:30" />
                    <Step title="石家庄" status="finish" description="完成时间：14:30" />
                    <Step title="郑州" status="finish" description="完成时间：16:30" />
                    <Step title="武汉" status="finish" description="完成时间：18:30" />
                    <Step title="长沙" status="finish" description="完成时间：17:30" />
                    <Step title="深圳" status="finish" description="完成时间：19:30" />
                    <Step title="广州" status="finish" description="完成时间：20:30" />
                </Steps>
            </Popup>
        </div>
    );
};

export default Index;